<template>
  <div class="container">
    <div class="container-wrap page-padding">
    <div class="date-chose-container">
      <div class="calendar">
        <img class="calendar-icon" src="../../assets/icon/calendar.svg" alt="">
        <span>{{startDate}}</span>
        至
        <span>{{endDate}}</span>
      </div>
      <div class="filter-container bgc-gray" @click="showCalendar = true">
        <van-icon name="filter-o" class="icon" size="18" />
        <span>筛选</span>
      </div>
      <!-- van-calendar 长时间跨度时渲染效率差 -->
      <van-calendar
        :min-date="new Date(DateUtil.dateStr('2020-01-01'))"
        :max-date="new Date(DateUtil.dateStr('2025-01-01'))"
        v-model="showCalendar"
        type="range"
        :show-confirm="true"
        color="rgba(31, 31, 241, 0.829)"
        @confirm="confirmDate"
      />
    </div>
    <div class="content">
      <detail v-for="(item, index) in detailList" :key="index" :info="item"></detail>
    </div>
    </div>
    <div
      class="footer-container bgc-blue"
      @click="writePlan">{{mode === 'today' ? '写总结' : '写新计划'}}
      <van-icon class="icon" name="edit" />
    </div>
     <van-dialog
        v-model="showDialog"
        show-cancel-button
        confirmButtonColor='rgba(31, 31, 241, 0.829)'
        @confirm='dialogConfirm'
        @cancel='dialogCancle'
      >
      <div class="dialog-container">
        <div class="title"
          @click="showDialogCalendar = true">
          {{dialogDate}}
        <van-icon name="arrow-down" /> </div>
        <textarea name="plan" v-model="newText" :placeholder="planPlaceHolder"></textarea>
        <van-uploader v-model="imgList" multiple :after-read='fileRead' >
        </van-uploader>
      </div>
     </van-dialog>
    <van-calendar
      :min-date="dialogMinDate"
      :max-date="dialogMaxDate"
      v-model="showDialogCalendar"
      :show-confirm="true"
      color="rgba(31, 31, 241, 0.829)"
      @confirm="confirmDialogDate"
    />
  </div>
</template>

<script>
import {
  Icon, Calendar, Dialog, Uploader,
} from 'vant';
import DateUtil from '../../utils/Date';
import Detail from './detail.vue';
import img1 from './1.png';
import img2 from './2.png';

export default {
  components: {
    [Icon.name]: Icon,
    [Calendar.name]: Calendar,
    [Dialog.Component.name]: Dialog.Component,
    [Uploader.name]: Uploader,
    Detail,
  },
  data() {
    return {
      mode: 'today',
      dialogDate: DateUtil.formatDate(new Date(), 'YY-MM-DD'),
      showCalendar: false,
      showDialogCalendar: false,
      showDialog: false,
      DateUtil,
      startDate: '2022-04-01',
      endDate: '2022-04-30',
      imgList: [],
      newText: '',
      detailList: [{
        date: '2022-04-24',
        content: '在配合政府疫情防疫工作的同时，做好客户服务工，加强客户粘度，注重客户积累及自我能力提升，加大重点产品的推广',
        imageList: [img1, img2],
      }],
    };
  },
  computed: {
    planPlaceHolder() {
      return this.mode === 'today' ? '往日总结……' : '未来计划……';
    },
    dialogMinDate() {
      return this.mode === 'today' ? new Date(DateUtil.dateStr('2022-01-01')) : new Date();
    },
    dialogMaxDate() {
      return this.mode === 'today' ? new Date() : new Date(DateUtil.dateStr('2022-12-31'));
    },
  },
  created() {
    let { mode } = this.$route.params;
    if (mode && mode === 'tomorrow') {
      this.mode = mode;
    }
  },
  methods: {
    confirmDate(value) {
      this.startDate = DateUtil.formatDate(value[0], 'YY-MM-DD');
      this.endDate = DateUtil.formatDate(value[1], 'YY-MM-DD');
      this.showCalendar = false;
    },
    confirmDialogDate(value) {
      this.dialogDate = DateUtil.formatDate(value, 'YY-MM-DD');
      this.showDialogCalendar = false;
    },
    writePlan() {
      this.showDialog = true;
    },
    dialogConfirm() {
      this.detailList.push({
        date: DateUtil.formatDate(new Date(), 'YY-MM-DD'),
        content: this.newText,
        imageList: this.imgList.map(el => el.content),
      });
      this.newText = '';
      this.imgList = [];
    },
    dialogCancle() {
      this.newText = '';
      this.imgList = [];
    },
    fileRead(file) {
      // this.imgList = this.imgList.concat(file.map(el => {
      //   let url = URL.createObjectURL(el.file);
      //   return {
      //     url,
      //     isImage: true,
      //   };
      // }));
    },
  },
};
</script>

<style scoped>
@import url('../../assets/styles/index.css');
.container-wrap{
  min-height: 100vh;
  display: flow-root;
}
.date-chose-container{
  height: 40px;
  margin: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.date-chose-container .calendar{
  display: flex;
  justify-content: center;
  align-items: flex-end;;
}
.filter-container{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.filter-container .icon{
  margin: 0 5px;
}
.calendar-icon{
  width: 18px;
  margin: 0 6px;
}
.content{
  padding-bottom: 60px;
}
.footer-container{
  height: 60px;
  margin-top: -60px;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-container .icon{
  height: 18px;
  width: 18px;
  margin-left: 8px;
}
.dialog-container{
  padding: 10px;
  height: 50vh;
  overflow-y: scroll;
}
.dialog-container .title{
  font-size: 18px;
  font-weight: bolder;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-container::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
textarea[name='plan']{
  width: 100%;
  display: inline-block;
  min-height: 25vh;
  resize: none;
  padding: 18px 12px;
  box-sizing: border-box;
  border: unset;
}
.upload-btn{
  width: 21vw;
  height: 21vw;
  border: 1px dashed gray ;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
